<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>改变鼠标样式和指向</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        html {
            background-color: #f4f4f4;
            cursor: none;
        }
        .pointer{
            width: 32px;
            height: 32px;
            position:fixed; /*设置固定定位 */
            margin-left: -16px;
        }
    </style>
</head>

<body>
    <div class="pointer">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <polygon fill="#aebfbf" stroke="red" stroke-width="3" points="16,0 32,32 16,25 0,32" />
        </svg>
    </div>
    <script>
        const pointer=document.querySelector(".pointer");
        let rad=0;
        
        window.onmousemove=(e)=>{
            if(Math.abs(e.movementX)+Math.abs(e.movementY)>=5){
                rad=Math.atan2(e.movementX,-e.movementY)
            }
            pointer.style.transform=`translate(${e.clientX}px,${e.clientY}px) rotate(${rad}rad)`
        }
    </script>
    
</body>

</html>